.params {
    .el-button--primary {
        background: $topic;
        border-radius: 0;
        border: none;
    }

    .is-plain {
        border: 1px solid $topic;
        background: none;

        &:hover {
            background: none;
            color: $topic;
        }
    }

    .params-form{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap:0 20px;
        >div{
            display: flex;
            align-items: center;
        }
        ::v-deep(.el-date-editor.el-input__wrapper){
            width: unset;
        }
    }
}
.preview{
    height: 32px;
    padding: 0 10px;
    border: $border;
    flex: 1;
}
::v-deep(.el-checkbox__input.is-checked+.el-checkbox__label){
    color: unset;
}
::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background: $topic;
    border: 1px solid $topic;
}
.total {
    color: #3D3D3D;

    span {
        color: rgb(134, 144, 156);
    }
}

.amount {
    height: 46px;
    background: #F2F6FC;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    line-height: 46px;
    margin: 10px auto;

    >div {
        padding-left: 20px;

        span {
            color: #3D3D3D;
        }
    }
}
.select-box{
    flex:1;
    gap:8px;
    display: grid;
    grid-template-columns: 1fr 3fr;
}

.batch {
    border: $border;
    border-bottom: none;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    box-sizing: border-box;
}
.slipCodes {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    line-height: 20px;
    color: #333
}

.subStr {
    &::after {
        content: ' / ';
        color: #DBDBDB;
    }
}
.table {
    border: $border;

    ::v-deep(.el-table tr) {
        height: 46px;

        .is-link {
            color: $topic;
        }

        td,
        th {
            border-bottom: $border !important;
        }

        .cell {
            display: flex;
            justify-content: center;
        }
    }

    ::v-deep(.el-table thead tr) {
        background: #F2F6FC;

        >th {
            background: transparent;
            text-align: center;
        }

        .el-table-fixed-column--right {
            background: #F2F6FC;
        }

    }

    ::v-deep(.el-table tbody tr:nth-child(even)) {
        background: #F2F6FC;
    }

    ::v-deep(.el-table tbody tr:last-child) {
        td {
            border-bottom: none !important;
        }

    }

    ::v-deep(.el-table__inner-wrapper) {
        &::before {
            display: none;
        }
    }
    .edit-category{
        width: 16px;
        height: 16px;
    }
}

.modal-title {
    display: flex;
    justify-content: space-between;

    .el-icon {
        font-size: 20px;
    }
}

.detail {
    background: #F5F7FA;

    >div:first-child {
        border-bottom: $border;
    }

    >div {
        display: flex;
        justify-content: space-between;
        min-height: 40px;
        align-items: center;
        padding: 0 20px;
        color: #86909C;

        .black {
            color: #3D3D3D;
            max-width: calc(100% - 80px);
        }
    }
    .remark{
        min-height: 40px;
        height: auto;
        line-height: 40px;
        align-items: start;
        span{
            padding-top: 5px;
            line-height: 30px;
        }
    }
    .img-list{
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        width: 270px;
        justify-content: end;
    }
}

.dialog-footer {
    .el-button--primary {
        background: $topic;
        border-radius: 0;
        border: none;
    }

    .el-button {
        border-radius: 0;
    }
}

.card {
    background: #F5F7FA;
    border-radius: 4px;
    margin: 10px auto;

    >div:last-child {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        text-align: center;
        line-height: 30px;
        padding: 10px 0;

        >div div:first-child {
            color: #86909C;

        }
    }
}

.sure {
    img {
        width: 100px;
        height: 100px;
    }
}

.del-tip {
    color: #FF3333;
}

.pay-table {
    border: $border;
    flex: 1;

    >div:first-child,
    .table-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        min-height: 40px;
        border-bottom: $border;

        >div {
            border-right: $border;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: bordrer-box;
        }

        >div:last-child {
            border-right: none;
        }

        ::v-deep(.el-form-item__error--inline) {
            margin: 0
        }
    }

    >div:first-child {
        background: #F2F6FC;
    }

    .table-row:last-child {
        border-bottom: none;
    }

    .el-empty {
        height: 150px;
    }
}

.avatar-uploader{
    .list {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
  
    .upload {
      width: 80px;
      height: 80px;
      background: #F2F3F5;
      display: grid;
      grid-template-columns: 1fr;
      place-items: center;
      align-self: center;
      color: #C9CDD4;
  
      span {
        font-style: normal;
      }
    }
  
    .el-icon svg {
      font-size: 24px;
    }
  
    .code {
      width: 80px;
      height: 80px;
      background: #F2F3F5;
      position: relative;
      img{
        width: 80px;
        height:80px;
    }
      &:hover {
        .del {
          display: flex;
          gap: 10px;
        }
      }
  
      .del {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, .2);
        display: none;
        color: #F2F3F5;
        font-size: 20px;
  
      }
    }
  }
.pay-title {
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 20px;
}